<template>
  <div class="file-preview">
    <h1>文件预览</h1>
    <el-card class="preview-card">
      <div class="upload-area" v-if="!previewUrl">
        <el-upload
          class="upload-container"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            支持 .pdf, .doc, .docx 等文件格式
          </div>
        </el-upload>
      </div>

      <div v-else class="preview-container">
        <div class="preview-header">
          <span class="file-name">{{ currentFile && currentFile.name }}</span>

          <el-button
            type="text"
            icon="el-icon-close"
            @click="resetPreview"
          ></el-button>
        </div>

        <!-- PDF预览 -->
        <div v-if="fileType === 'pdf'" class="pdf-container">
          <iframe
            :src="previewUrl"
            width="100%"
            height="600"
            frameborder="0"
          ></iframe>
          
        </div>

        <!-- Office文件预览  无法预览本地的文件 -->
        <!-- 可以利用第三方库，来预览本地文件，或者将其转化为HTML的语言然后用v-html 来将这个office文件渲染出来 -->
        <div
          v-else-if="
            ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(fileType)
          "
          class="office-container"
        >
          <iframe
            :src="
              'https://view.officeapps.live.com/op/embed.aspx?src=' +
              encodeURIComponent(previewUrl)
            "
            width="100%"
            height="600"
            frameborder="0"
          >
          </iframe>
        </div>

        <!-- 不支持的文件格式 -->
        <div v-else class="unsupported-format">
          <i class="el-icon-warning"></i>
          <p>不支持预览此文件格式</p>
          <el-button type="primary" size="small" @click="downloadFile"
            >下载文件</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "FilePreview",
  data() {
    return {
      previewUrl: "", // 预览文件的URL
      currentFile: null, // 当前文件
      fileType: "", // 文件类型
    };
  },
  methods: {
    handleFileChange(file) {
      if (file && file.raw) {
        console.log("上传的文件:", file);
        this.currentFile = file.raw;
        this.fileType = this.getFileType(file.raw.name);

        // 为本地文件创建URL
        this.previewUrl = URL.createObjectURL(file.raw);

        // 如果是PDF或Office文件，直接预览
        if (
          this.fileType === "pdf" ||
          ["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(this.fileType)
        ) {
          // 对于实际项目，这里可能需要上传文件到服务器，然后获取可访问的URL
          // 当前示例直接使用本地blob URL，部分浏览器可能无法通过Office Online Viewer访问本地文件
          console.log("预览文件:", this.fileType);
        } else {
          this.$message.warning("暂不支持预览该文件格式");
        }
      }
    },
    resetPreview() {
      if (this.previewUrl) {
        URL.revokeObjectURL(this.previewUrl);
      }
      this.previewUrl = "";
      this.currentFile = null;
      this.fileType = "";
    },
    getFileType(fileName) {
      if (!fileName) return "";
      const extension = fileName.split(".").pop().toLowerCase();
      return extension;
    },
    downloadFile() {
      if (this.currentFile) {
        const a = document.createElement("a");
        a.href = this.previewUrl;
        a.download = this.currentFile.name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.file-preview {
  padding: 20px;

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  .preview-card {
    margin: 0 auto;
    max-width: 1000px;
  }

  .upload-area {
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }

  .preview-container {
    .preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;

      .file-name {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .pdf-container,
    .office-container {
      width: 100%;
      min-height: 600px;
    }

    .unsupported-format {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 0;

      i {
        font-size: 48px;
        color: #e6a23c;
        margin-bottom: 20px;
      }

      p {
        margin-bottom: 20px;
        color: #606266;
      }
    }
  }
}
</style>